<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IoT PWA</title>
    <link rel="manifest" href="manifest.json">
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="icons/icon-192.png" type="image/png">
    <meta name="theme-color" content="#007bff">
</head>
<body>
    <div class="app-container" data-auto-init-sdk="true">
        <header class="app-header">
            <h1>IoT</h1>
        </header>
        
        <main class="app-content">
            <!-- iframe将由JavaScript动态创建 -->
        </main>
        
        <nav class="bottom-nav">
            <ul>
                <li id="nav-home" class="nav-item active">
                    <div class="nav-icon">🏠</div>
                    <span class="nav-text">首页</span>
                </li>
                <li id="nav-control" class="nav-item">
                    <div class="nav-icon">🎮</div>
                    <span class="nav-text">控制</span>
                </li>
                <li id="nav-ai" class="nav-item">
                    <div class="nav-icon ai-globe"></div>
                    <span class="nav-text">AI</span>
                </li>
                <li id="nav-discovery" class="nav-item">
                    <div class="nav-icon">🔍</div>
                    <span class="nav-text">发现</span>
                </li>
                <li id="nav-mine" class="nav-item">
                    <div class="nav-icon">👤</div>
                    <span class="nav-text">我的</span>
                </li>
            </ul>
        </nav>
        
        <!-- 设置面板 (默认隐藏) -->
        <div id="settings-panel" class="settings-panel" style="display: none;">
            <div class="settings-header">
                <h2>设置</h2>
                <button id="close-settings">×</button>
            </div>
            <div class="settings-content">
                <div class="setting-item">
                    <label for="language-select">语言</label>
                    <select id="language-select">
                        <option value="zh-CN">简体中文</option>
                        <option value="en-US">English</option>
                    </select>
                </div>
                <div class="setting-item">
                    <label for="theme-select">主题</label>
                    <select id="theme-select">
                        <option value="light">浅色</option>
                        <option value="dark">深色</option>
                    </select>
                </div>
                <div class="setting-item">
                    <label for="temp-unit">温度单位</label>
                    <select id="temp-unit">
                        <option value="celsius">摄氏度 (°C)</option>
                        <option value="fahrenheit">华氏度 (°F)</option>
                    </select>
                </div>
                <div class="setting-buttons">
                    <button id="export-config">导出配置</button>
                    <button id="import-config">导入配置</button>
                    <input type="file" id="config-file" accept=".json" style="display: none;">
                    <button id="reset-config">重置配置</button>
                </div>
                <div class="offline-status">
                    <span id="connection-status">在线</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 配置管理模块 -->
    <script src="js/config.js" type="module"></script>
    <!-- 国际化支持 -->
    <script src="js/i18n.js"></script>
    <!-- 框架通信SDK -->
    <script src="js/frame-sdk.js"></script>
    <!-- 主要脚本 -->
    <script src="js/main.js" type="module"></script>
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('service-worker.js')
                    .then(registration => {
                        console.log('Service Worker 注册成功:', registration.scope);
                    })
                    .catch(error => {
                        console.log('Service Worker 注册失败:', error);
                    });
            });
        }
    </script>
    
    <!-- 设置面板功能 -->
    <script type="module">
        // 导入配置管理器
        import configManager from './js/config.js';
        
        // 等待所有模块加载完成
        document.addEventListener('DOMContentLoaded', () => {
            // 获取元素引用
            const settingsPanel = document.getElementById('settings-panel');
            const closeSettingsBtn = document.getElementById('close-settings');
            const languageSelect = document.getElementById('language-select');
            const themeSelect = document.getElementById('theme-select');
            const tempUnitSelect = document.getElementById('temp-unit');
            const exportConfigBtn = document.getElementById('export-config');
            const importConfigBtn = document.getElementById('import-config');
            const configFileInput = document.getElementById('config-file');
            const resetConfigBtn = document.getElementById('reset-config');
            const connectionStatus = document.getElementById('connection-status');
            
            // 打开设置面板的功能（需要在main.js中调用）
            window.openSettings = function() {
                settingsPanel.style.display = 'block';
                // 加载当前配置到表单
                loadConfigToForm();
            };
            
            // 关闭设置面板
            closeSettingsBtn.addEventListener('click', () => {
                settingsPanel.style.display = 'none';
            });
            
            // 加载配置到表单
            function loadConfigToForm() {
                const config = configManager.getAll();
                
                // 设置语言
                if (languageSelect) {
                    languageSelect.value = config.language || 'zh-CN';
                }
                
                // 设置主题
                if (themeSelect) {
                    themeSelect.value = config.theme || 'light';
                }
                
                // 设置温度单位
                if (tempUnitSelect) {
                    tempUnitSelect.value = config.temperatureUnit || 'celsius';
                }
            }
            
            // 保存表单配置
            function saveFormConfig() {
                const newConfig = {};
                
                if (languageSelect) {
                    newConfig.language = languageSelect.value;
                    // 更新i18n语言
                    if (window.i18n) {
                        window.i18n.setLanguage(languageSelect.value);
                    }
                }
                
                if (themeSelect) {
                    newConfig.theme = themeSelect.value;
                    // 应用主题
                    applyTheme(themeSelect.value);
                }
                
                if (tempUnitSelect) {
                    newConfig.temperatureUnit = tempUnitSelect.value;
                }
                
                // 保存到配置管理器
                configManager.setMultiple(newConfig);
            }
            
            // 应用主题
            function applyTheme(theme) {
                if (theme === 'dark') {
                    document.body.classList.add('dark-theme');
                } else {
                    document.body.classList.remove('dark-theme');
                }
            }
            
            // 监听表单变化，自动保存
            if (languageSelect) languageSelect.addEventListener('change', saveFormConfig);
            if (themeSelect) themeSelect.addEventListener('change', saveFormConfig);
            if (tempUnitSelect) tempUnitSelect.addEventListener('change', saveFormConfig);
            
            // 导出配置
            if (exportConfigBtn) {
                exportConfigBtn.addEventListener('click', () => {
                    configManager.exportConfig();
                });
            }
            
            // 导入配置
            if (importConfigBtn) {
                importConfigBtn.addEventListener('click', () => {
                    configFileInput.click();
                });
            }
            
            if (configFileInput) {
                configFileInput.addEventListener('change', async (event) => {
                    const file = event.target.files[0];
                    if (file) {
                        try {
                            await configManager.importConfig(file);
                            // 重新加载配置到表单
                            loadConfigToForm();
                            // 应用主题
                            const config = configManager.getAll();
                            applyTheme(config.theme || 'light');
                            // 更新语言
                            if (config.language && window.i18n) {
                                window.i18n.setLanguage(config.language);
                            }
                            alert('配置导入成功！');
                        } catch (error) {
                            alert('配置导入失败: ' + error.message);
                        }
                        // 清空文件输入，允许重复导入同一文件
                        event.target.value = '';
                    }
                });
            }
            
            // 重置配置
            if (resetConfigBtn) {
                resetConfigBtn.addEventListener('click', () => {
                    if (confirm('确定要重置所有配置吗？这将恢复默认设置。')) {
                        configManager.reset();
                        // 重新加载配置到表单
                        loadConfigToForm();
                        // 应用默认主题
                        applyTheme('light');
                        // 更新默认语言
                        if (window.i18n) {
                            window.i18n.setLanguage('zh-CN');
                        }
                        alert('配置已重置！');
                    }
                });
            }
            
            // 网络状态监控
            function updateConnectionStatus() {
                if (navigator.onLine) {
                    connectionStatus.textContent = '在线';
                    connectionStatus.className = 'online';
                } else {
                    connectionStatus.textContent = '离线';
                    connectionStatus.className = 'offline';
                }
            }
            
            // 初始检查网络状态
            updateConnectionStatus();
            
            // 监听网络状态变化
            window.addEventListener('online', updateConnectionStatus);
            window.addEventListener('offline', updateConnectionStatus);
            
            // 初始应用主题
            const initialTheme = configManager.get('theme', 'light');
            applyTheme(initialTheme);
            
            // 初始化设置面板的配置
            loadConfigToForm();
            
            // 暴露配置管理器到window对象，方便其他模块访问
            window.configManager = configManager;
        });
    </script>
</body>
</html>